<template>
	<div class="row">
		<div class="rowItem">
			<div class="title">招标阶段</div>
			<div class="chart" id="ybchart1"></div>
		</div>
		<div class="rowItem">
			<div class="title">投标阶段</div>
			<div class="chart" id="ybchart2"></div>
		</div>
		<div class="rowItem">
			<div class="title">开评标阶段</div>
			<div class="chart" id="ybchart3"></div>
		</div>
		<div class="rowItem">
			<div class="title">定标阶段</div>
			<div class="chart" id="ybchart4"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from "echarts"
	export default {
		name: "item",
		data() {
			return {

			}
		},
		mounted() {
			this.getInit(100, 'ybchart1')
			this.getInit(100, 'ybchart2')
			this.getInit(98, 'ybchart3')
			this.getInit(100, 'ybchart4')
		},
		methods: {
			getInit(val, dom) {
				var mapChart = echarts.init(document.getElementById(dom));
				let dataVal = val / 100
				let option = {
					series: [{
							name: '最外层',
							type: 'gauge',
							radius: '100%',
							center: ['50%', '60%'],
							splitNumber: 0, //刻度数量
							startAngle: 200,
							endAngle: -20,
							min: 0, //最小刻度
							max: 100, //最大刻度
							z: 0,
							zlevel: 0,
							axisLine: {
								show: true,
								lineStyle: {
									// 轴线样式
									width: 1, // 宽度
									color: [
										[1, 'rgba(156, 123, 255, .2)']
									],
								},
							},
							//分隔线样式
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							pointer: {
								show: true,
								length: '80%',
								width: '2%',
							},
						},
						{
							name: '数据显示',
							type: 'gauge',
							radius: '60%',
							center: ['50%', '60%'],
							splitNumber: 2, //刻度数量
							startAngle: 200,
							endAngle: -20,
							min: 0, //最小刻度
							max: 100, //最大刻度
							z: 2,
							zlevel: 2,
							axisLine: {
								show: true,
								lineStyle: {
									// 轴线样式
									width: 10, // 宽度
									color: [
										[1, 'rgba(156, 123, 255, 0.1)'],
									],
								},
							},
							//分隔线样式。
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
								color: '#4b695e',
								fontSize: 15,
								distance: 0,
								formatter: function(v) {
									return v;
								},
							},
							axisTick: {
								show: true,
								splitNumber: 20,
								distance: -5,
								lineStyle: {
									color: 'rgba(156, 123, 255, .4)',
									width: 1,
								},
								length: -4,
							},
							pointer: {
								show: false,
								length: '80%',
								width: '2%',
								itemStyle: {
									color: 'rgba(254, 210, 69, 1)',
								},
							},
							//仪表盘详情，用于显示数据。
							detail: {
								show: true,
								offsetCenter: [0, '20%'],
								color: '#ffffff',
								textStyle: {
									fontSize: 14,
									color: '#FFFFFF',
									fontFamily: 'YouSheBiaoTiHei',
									textShadowBlur: '4',
									textShadowColor: 'rgba(111, 123, 255, 0.74)',
								},
								formatter: function(value) {
									return value + '%'
								},
							},
							data: [val],
						},
						{
							name: '背景内',
							type: 'gauge',
							radius: '75%',
							center: ['50%', '60%'],
							splitNumber: 0, //刻度数量
							startAngle: 200,
							endAngle: -20,
							min: 0, //最小刻度
							max: 100, //最大刻度
							z: 1,
							zlevel: 1,
							axisLine: {
								show: true,
								lineStyle: {
									// 轴线样式
									width: 8, // 宽度
									color: [
										[
											dataVal,
											new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
													offset: 0,
													color: '#9C7BFF',
												},
												{
													offset: 1,
													color: '#626FFF',
												},
											]),
										],
									],
								},
							},
							//分隔线样式。
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							pointer: {
								show: true,
								length: '80%',
								width: '2%',
							},
						},
						{
							name: '背景内2',
							type: 'gauge',
							radius: '85%',
							center: ['50%', '60%'],
							splitNumber: 0, //刻度数量
							startAngle: 200,
							endAngle: -20,
							min: 0, //最小刻度
							max: 100, //最大刻度
							z: 1,
							zlevel: 1,
							axisLine: {
								show: true,
								lineStyle: {
									// 轴线样式
									width: 4, // 宽度
									color: [
										[
											dataVal,
											'rgba(156, 123, 255, 0.3)'
										],
									],
								},
							},
							//分隔线样式。
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							pointer: {
								show: true,
								length: '80%',
								width: '2%',
							},
						},
						{
							name: '背景-外',
							type: 'gauge',
							radius: '85%',
							center: ['50%', '60%'],
							splitNumber: 0, //刻度数量
							startAngle: 200,
							endAngle: -20,
							min: 0, //最小刻度
							max: 100, //最大刻度
							z: 0,
							zlevel: 0,
							axisLine: {
								show: true,
								lineStyle: {
									// 轴线样式
									width: 16, // 宽度
									color: [
										[1, 'rgba(156, 123, 255, 0.3)'],
									],
								},
							},
							//分隔线样式。
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false,
							},
							axisTick: {
								show: false,
							},
							pointer: {
								show: true,
								length: '80%',
								width: '2%',
							},
						},
					],
				};
				mapChart.setOption(option, true)

				window.addEventListener('resize', () => {
					mapChart.resize();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.row {
		height: 100%;
		display: flex;
		flex-wrap: wrap;

		.rowItem {
			width: 50%;
			height: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			padding: 10px 20px;
			position: relative;

			.chart {
				flex: 1;
				min-width: 0;
				height: 100%;
			}

			.title {
				color: #D7E7FF;
				font-size: 12px;
				background-color: rgba(0, 113, 176, .15);
				border: 1px solid rgba(0, 178, 255, .25);
				padding: 10px 8px;
				border-radius: 0 15px 15px 0;
				width: 12px;
			}


			&::after{
				position: absolute;
				content: '';
				right: 0;
				top: 20px;
				bottom: 20px;
				width: 1px;
				background-color: rgba(0, 194, 255, .2);
			}

			&::before{
				position: absolute;
				content: '';
				left: 20px;
				right: 20px;
				height: 1px;
				bottom: 0;
				background-color: rgba(0, 194, 255, .2);
			}
		}

		.rowItem:nth-child(even){
			&::after{
				display: none;
			}
		}

		.rowItem:nth-last-child(2){
			&::before{
				display: none;
			}
		}

		.rowItem:last-child{
			&::before{
				display: none;
			}
		}
	}
</style>
